<template>
<!-- @after-enter="afterEnter" 自动关闭-->
  <div class="rx-toast" 
    :type="type" >
    <!-- 内容 -->
    <transition appear name="fade" @after-enter="afterEnter" @after-leave="afterLeave">
      <div class="rx-toast-box" v-if="show">
          <!-- 图标 -->
          <rx-icon name="rxtoast-success"/>
          <rx-icon name="rxtoast-info"/>
          <rx-icon name="rxtoast-warn"/>
          <rx-icon name="rxtoast-error"/>
          <!-- 提示消息 -->
          {{message}}
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name:'toast',
  props: {
    message: {
      type: String,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  data(){
    return{
      show:true
    }
  },
  methods: {
    afterEnter() {
      this.show=false;
    },
    afterLeave() {
      //销毁dom
      this.$emit('destroy');
    }
  }
};
</script>

<style  lang="scss">
.rx-toast {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 99999;
  overflow: hidden;
  .rx-toast-box {
    text-align: center;
    font-size: 15px;
    line-height: 50px;
  }
  svg.rx-icon {
    margin-right: 5px;

    &[name="rxtoast-success"],
    &[name="rxtoast-error"],
    &[name="rxtoast-warn"],
    &[name="rxtoast-info"] {
      display: none;
    }
  }

  //遍历状态
  $types: (
    (
      type: "success",
      color: #4ec66b,
      bgcolor: #ebf8f2
    ),
    (
      type: "warn",
      color: #eb9e08,
      bgcolor: #fffaeb
    ),
    (
      type: "error",
      color: #f56a00,
      bgcolor: #fadfdf
    ),
    (
      type: "info",
      color: #3673ff,
      bgcolor: #ecf6fd
    )
  );

  @for $i from 1 through length($types) {
    $item: nth($types, $i);

    &[type="#{map-get($item, type)}"] {
      .rx-toast-box{
        color: map-get($item, color);
        background-color: map-get($item, bgcolor);
      }
      svg.rx-icon[name="rxtoast-#{map-get($item, type)}"] {
        display: inline;
      }
    }
  }
  }
  .fade-enter,.fade-leave-to{
      transform: translateY(-50px); 
    }
    .fade-enter-active,
    .fade-leave-active{
      transition: all 0.3s;
    }
    .fade-enter-to,.fade-leave{
      transform: translateY(0px);
    }
    .fade-leave-active{
      transition-delay: 2s;
    }    
</style>
